<template>
  <div class="hm-header">
    <div class="left" @click="$emit('clickLeft')" v-if="showArrow">&lt;</div>
    <!-- 如果showArrow为true，则显示返回箭头 -->
    <div class="center"><slot>我是标题</slot></div>
    <!-- 中间部分显示标题 -->
    <div class="right"><slot name="right"></slot></div>
    <!-- 右边部分显示搜索按钮 -->
  </div>
</template>

<script>
export default {
  props: {
    showArrow: {
      type: Boolean,
      default: false, // 默认情况下不显示返回箭头
    },
  },
};
</script>

<style lang="less" scoped>
.hm-header {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  // width: 100%;
  height: 50px; /* 固定高度为50px */
  padding: 0 10px; /* 内边距左右各10px */
  justify-content: space-between; /* 子元素之间均匀分布 */
  background-color: orange; /* 背景颜色为橙色 */
  border-bottom: 1px solid gray; /* 底部边框为1px黑色实线 */
  .center {
    flex: 1; /* 中间部分占据剩余空间 */
    text-align: center; /* 文字居中对齐 */
  }
}
</style>
